<template>
  <div class="home">
    <div class="appPc" v-if="$store.state.screenWidth > 1300">
      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Mingteng International Corp Inc.</h1>
      </div>

      <div class="stock interval">
        <h1 class="stock-title">Stock Snapshot</h1>
        <div class="stock-back">
          <div class="back-title">Mingteng International Corp Inc.(MTEN)</div>
          <div class="back-text">Nasdaq (At Close), Currency in USD</div>
          <div class="back-price">
            {{ stockObj.last_price }}
            <span>{{ stockObj.rise_fall }}({{ stockObj.rise_fall_per }})</span>
          </div>
          <div class="back-time">{{ stockObj.uptime }} (At Close)</div>
        </div>

        <div class="stock-block">
          <div class="list" v-for="(item, index) in 8" :key="index">
            <div class="left">
              {{
                index == 0
                  ? "Previous Close"
                  : index == 1
                  ? "Volume"
                  : index == 2
                  ? "Today’s Open"
                  : index == 3
                  ? "Average Volume (10 days)"
                  : index == 4
                  ? "Day's Range"
                  : index == 5
                  ? "Market Cap"
                  : index == 6
                  ? "52 Week Range"
                  : index == 7
                  ? "Total Shares Outstanding"
                  : ""
              }}
            </div>
            <div class="right">
              {{
                index == 0
                  ? stockObj.yesy_price
                  : index == 1
                  ? stockObj.volume
                  : index == 2
                  ? stockObj.open_price
                  : index == 3
                  ? stockObj.day10_volume
                  : index == 4
                  ? stockObj.low_price + "  -  " + stockObj.high_price
                  : index == 5
                  ? stockObj.mvalue
                  : index == 6
                  ? stockObj.week52_low + "  -  " + stockObj.week52_high
                  : index == 7
                  ? stockObj.equity
                  : ""
              }}
            </div>
          </div>

          <div class="info" @click="moreStop">
            More Info
            <img src="../../assets/right.png" alt="" />
          </div>
        </div>
      </div>

      <div class="latest reverseInterval">
        <div class="left">
          <div class="left-title">Latest Company Reports</div>

          <div class="left-list" v-for="(item, index) in 2" :key="index">
            <div class="list-1">
              <div class="title">RW Form</div>
              <div class="text">May 02,2025</div>
            </div>
            <div class="list-2">
              <img src="../../assets/common/html.svg" alt="" />
            </div>
          </div>

          <div class="left-button" @click="secStop">View All SEC Filings</div>
        </div>
        <div class="right">
          <div class="right-title">Latest Press Releases</div>
          <div class="right-text">
            Mingteng International Corporation Inc. Announces Financial Results
            for Fiscal Year 2024
          </div>

          <div class="right-time">Apr 30, 2025</div>

          <div style="display: flex; margin-top: 17.5%">
            <div
              class="right-list"
              v-for="(item, index) in 2"
              :key="index"
              @click="ReleaseStop(index)"
            >
              {{
                index == 0
                  ? "View Press Release"
                  : index == 1
                  ? "View All News"
                  : ""
              }}
            </div>
          </div>
        </div>
      </div>

      <div class="profile interval">
        <div class="left">
          <img
            src="https://1948099.ir365connect.com/images/home2/about_the_company_img.jpg"
            alt=""
          />
        </div>
        <div class="right">
          <div class="right-title">Company Profile</div>
          <div class="right-text">
            Mingteng International Corp Inc operates as an automotive mold
            developer and supplier in China. It provides a wide range of
            products including casting molds for turbocharger systems, braking
            systems, steering and differential systems, and other automotive
            system parts. Besides, it also produces molds for new energy
            electric vehicle motor drive systems, battery pack systems, and
            engineering hydraulic components, which are widely used in
            automobile, construction machinery, and other manufacturing
            industries.
          </div>

          <div class="right-block">
            <div class="list" v-for="(item, index) in 2" :key="index">
              <div class="list-title">
                {{ index == 0 ? "Sector" : index == 1 ? "Industry" : "" }}
              </div>

              <div class="list-striping"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="appH5" v-else>
      <div class="popup-lint"></div>

      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Mingteng International Corp Inc.</h1>
      </div>

      <div class="stock">
        <h2 class="stock-title">Stock Snapshot</h2>
        <div class="stock-back">
          <div class="back-title">Mingteng International Corp Inc.(MTEN)</div>
          <div class="back-text">Nasdaq (At Close), Currency in USD</div>
          <div class="back-price">
            {{ stockObj.last_price }}
            <span>{{ stockObj.rise_fall }}({{ stockObj.rise_fall_per }})</span>
          </div>
          <div class="back-time">{{ stockObj.uptime }} (At Close)</div>
        </div>

        <div class="stock-block">
          <div class="list" v-for="(item, index) in 8" :key="index">
            <div class="left">
              {{
                index == 0
                  ? "Previous Close"
                  : index == 1
                  ? "Volume"
                  : index == 2
                  ? "Today’s Open"
                  : index == 3
                  ? "Average Volume (10 days)"
                  : index == 4
                  ? "Day's Range"
                  : index == 5
                  ? "Market Cap"
                  : index == 6
                  ? "52 Week Range"
                  : index == 7
                  ? "Total Shares Outstanding"
                  : ""
              }}
            </div>
            <div class="right">
              {{
                index == 0
                  ? stockObj.yesy_price
                  : index == 1
                  ? stockObj.volume
                  : index == 2
                  ? stockObj.open_price
                  : index == 3
                  ? stockObj.day10_volume
                  : index == 4
                  ? stockObj.low_price + "  -  " + stockObj.high_price
                  : index == 5
                  ? stockObj.mvalue
                  : index == 6
                  ? stockObj.week52_low + "  -  " + stockObj.week52_high
                  : index == 7
                  ? stockObj.equity
                  : ""
              }}
            </div>
          </div>

          <div class="info" @click="moreStop">
            More Info
            <img src="../../assets/right.png" alt="" />
          </div>
        </div>
      </div>

      <div class="latest">
        <div class="left">
          <div class="left-title">
            Latest<br />
            Company<br />
            Reports
          </div>

          <div class="left-list" v-for="(item, index) in 2" :key="index">
            <div class="list-1">
              <div class="title">RW WD Form</div>
              <div class="text">May 02,2025</div>
            </div>
            <div class="list-2">
              <img src="../../assets/common/html.svg" alt="" />
            </div>
          </div>

          <div class="left-button" @click="secStop">View All SEC Filings</div>
        </div>
        <div class="right">
          <div class="right-title">Latest Press <br />Releases</div>
          <div class="right-text">
            Mingteng International Corporation Inc. Announces Financial Results
            for Fiscal Year 2024
          </div>

          <div class="right-time">Apr 30, 2025</div>

          <div
            class="right-list"
            v-for="(item, index) in 2"
            :key="index"
            @click="ReleaseStop(index)"
          >
            {{
              index == 0
                ? "View Press Release"
                : index == 1
                ? "View All News"
                : ""
            }}
          </div>
        </div>
      </div>

      <div class="profile">
        <div class="profile-title">Company Profile</div>
        <img
          class="profile-img"
          src="https://1948099.ir365connect.com/images/home2/about_the_company_img.jpg"
          alt=""
        />
        <div class="profile-text">
          Mingteng International Corp Inc operates as an automotive mold
          developer and supplier in China. It provides a wide range of products
          including casting molds for turbocharger systems, braking systems,
          steering and differential systems, and other automotive system parts.
          Besides, it also produces molds for new energy electric vehicle motor
          drive systems, battery pack systems, and engineering hydraulic
          components, which are widely used in automobile, construction
          machinery, and other manufacturing industries.
        </div>
        <div class="profile-block">
          <div class="list" v-for="(item, index) in 2" :key="index">
            <div class="list-title">
              {{ index == 0 ? "Sector" : index == 1 ? "Industry" : "" }}
            </div>

            <div class="list-striping"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { StockGet } from "../../api";

export default {
  data() {
    return {
      stockObj: {},
    };
  },
  created() {
    this.StockGetMet();
    this.scrollTotap();
  },
  methods: {
    scrollTotap() {
      window.scrollTo(0, 0);
    },
    StockGetMet() {
      let params = {};

      StockGet(params).then((res) => {
        if (res.errorCode == null) {
          let fuhao =  res.resultData.rise_fall_per.substring(0, 1)
          res.resultData.rise_fall_per = fuhao + '' + res.resultData.rise_fall_per * 1 + "%"

          this.stockObj = res.resultData;
        }
      });
    },

    //-----------
    secStop() {
      this.$router.push({
        path: "/sec",
      });
    },
    moreStop() {
      this.$router.push({
        path: "/stock",
      });
    },
    ReleaseStop(index) {
      if (index == 0) {
        this.$router.push({
          path: "/releases/6",
        });
      } else {
        this.$router.push({
          path: "/releases",
        });
      }
    },
  },
};
</script>


<!--电脑端-->
<style lang="less" scoped>
.home {
  .appPc {
    .header {
    }

    .backdrop {
      width: 100%;
      height: 635px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 48px;
        font-weight: bold;
      }
    }

    .stock {
      padding: 30px 0;
      box-sizing: border-box;

      .stock-title {
        font-weight: 500;
        font-size: 48px;
        margin-bottom: 20px;
      }

      .stock-back {
        padding: 30px;
        box-sizing: border-box;
        background: #276cd3;
        display: inline-block;
        border-radius: 20px;
        .back-title {
          color: #fff;
          font-size: 28px;
          font-weight: 500;
          margin-bottom: 5px;
        }

        .back-text {
          font-size: 18px;
          color: #fff;
          font-weight: 500;
          margin-bottom: 5px;
        }

        .back-price {
          font-size: 48px;
          color: #fff;
          font-weight: 500;

          span {
            font-size: 30px;
          }
        }

        .back-time {
          font-size: 18px;
          color: #fff;
          font-weight: 500;
          margin-top: 5px;
        }
      }

      .stock-block {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        .list {
          width: 47%;
          height: 50px;
          border-bottom: 1px solid #2c3341;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-right: 30px;

          .left,
          .right {
            font-size: 17px;
            font-weight: 500;
            color: #2c3341;
          }
        }

        .list:last-child {
          margin-right: 0;
        }

        .info {
          display: flex;
          align-items: center;

          color: #276cd3;
          font-size: 20px;
          font-weight: 600;
          margin-top: 30px;
          cursor: pointer;

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }
    }

    .latest {
      margin-top: 30px;
      background: #30353e;
      padding-top: 100px;
      padding-bottom: 100px;
      box-sizing: border-box;
      display: flex;

      .left {
        width: 50%;
        position: relative;

        .left-title {
          color: #fff;
          font-size: 48px;
          font-weight: 500;
          margin-bottom: 20px;
          margin-top: 50px;
        }
        .left-list {
          border-top: 1px solid #797c84;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .list-1 {
            padding: 20px 0;
            .title {
              color: #fff;
              font-weight: 500;
              font-size: 32px;
              margin-bottom: 5px;
            }

            .text {
              color: #fff;
              font-weight: 500;
              font-size: 20px;
            }
          }

          .list-2 {
            width: 20px;
            height: 20px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .left-list:last-child {
          border-bottom: 1px solid #797c84;
        }

        .left-button {
          height: 60px;
          padding: 0 40px;
          box-sizing: border-box;
          border: 1px solid #fff;
          border-radius: 30px;
          font-size: 22px;
          font-weight: 600;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          display: inline-flex;
          margin-top: 50px;
        }

        .left-button:hover {
          background: #f7f7f7;
          color: #276cd3;
          transition: transform 0.2s, 0.2s;
        }
      }

      .right {
        width: 50%;
        padding: 40px;
        box-sizing: border-box;
        background: #444b55;
        border-radius: 10px;
        margin-left: 100px;

        .right-title {
          color: #fff;
          font-size: 48px;
          font-weight: 500;
          padding-bottom: 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #797c84;
        }

        .right-text {
          margin-top: 10px;
          color: #fff;
          font-size: 30px;
          font-weight: 500;
          line-height: 40px;
        }

        .right-time {
          margin-top: 20px;
          color: #fff;
          font-size: 18px;
          font-weight: 500;
        }

        .right-list {
          border-radius: 30px;
          height: 60px;
          background: #fff;
          display: inline-flex;
          align-items: center;
          margin-bottom: 10px;
          justify-content: center;
          font-size: 20px;
          color: #276cd3;
          font-weight: 500;
          border: 1px solid #fff;
          padding: 0 40px;
          box-sizing: border-box;
          margin-right: 20px;
          cursor: pointer;
        }

        .right-list:last-child {
          color: #fff;
          background: none;
          margin-right: 0;
        }

        .rightHover {
          transition: transform 0.2s, 0.2s;
        }
      }
    }

    .profile {
      margin-top: 20px;
      padding: 100px 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        width: 40%;
        height: 470px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .right {
        text-align: left;
        width: 59%;
        margin-left: 30px;

        .right-title {
          font-size: 48px;
          font-weight: 500;
          margin-bottom: 10px;
        }

        .right-text {
          font-size: 19px;
          font-weight: 200;
          line-height: 30px;
        }

        .right-block {
          display: flex;
          margin-top: 20px;

          .list {
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            position: relative;
            margin-right: 40px;
            border-radius: 10px;
            background: #ffffff;
            box-shadow: 0 4px 24px rgba(89, 95, 102, 0.25);
            transition: transform 0.5s ease;
            position: relative;
            cursor: pointer;

            .list-title {
              font-size: 32px;
              font-weight: 500;
              text-align: center;
              width: 100px;
              margin: 0 auto;
            }

            .list-striping {
              width: 60px;
              height: 3px;
              background: #276cd3;
              position: absolute;
              margin-top: 50px;
              transition: width 1s, 0.5s;
              border-radius: 4px;
              margin-left: 50px;
            }
          }

          .list:last-child {
            margin-right: 0;
          }

          .list:hover {
            transform: scale(1.1);

            .list-striping {
              width: 100px;
            }
          }
        }
      }
    }
  }

  .appH5 {
    .popup-lint {
      width: 100%;
      height: 40px;
    }

    .backdrop {
      width: 100%;
      height: 230px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .stock {
      padding: 20px 10px;
      box-sizing: border-box;

      .stock-title {
        letter-spacing: 0.2px;
        font-size: 20px;
        font-weight: 500;
      }

      .stock-back {
        background: #276cd3;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 10px;
        display: inline-block;

        .back-title {
          color: #fff;
          font-size: 20px;
          font-weight: 600;
        }
        .back-text {
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          margin-top: 2px;
        }

        .back-price {
          color: #fff;
          font-size: 30px;
          font-weight: bold;
          margin-top: 2px;

          span {
            font-size: 16px;
          }
        }

        .back-time {
          margin-top: 2px;
          font-size: 14px;
          color: #fff;
          font-weight: 500;
        }
      }

      .stock-block {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        .list {
          width: 100%;
          height: 40px;
          border-bottom: 1px solid #2c3341;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left,
          .right {
            font-size: 14px;
            font-weight: 500;
            color: #2c3341;
          }
        }

        .info {
          display: flex;
          align-items: center;

          color: #276cd3;
          font-size: 18px;
          font-weight: 500;
          margin-top: 30px;

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }
    }

    .latest {
      margin-top: 30px;
      background: #30353e;
      padding: 30px 10px;
      box-sizing: border-box;
      display: flex;

      .left {
        width: 50%;
        position: relative;
        .left-title {
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          line-height: 25px;
          margin-bottom: 20px;
          margin-top: 10px;
        }
        .left-list {
          border-top: 1px solid #797c84;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .list-1 {
            padding: 10px 0;
            .title {
              color: #fff;
              font-weight: 600;
              font-size: 16px;
              margin-bottom: 5px;
            }

            .text {
              color: #fff;
              font-weight: bold;
              font-size: 12px;
            }
          }

          .list-2 {
            width: 20px;
            height: 20px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .left-list:last-child {
          border-bottom: 1px solid #797c84;
        }

        .left-button {
          height: 40px;
          padding: 0 10px;
          box-sizing: border-box;
          border: 1px solid #fff;
          border-radius: 30px;
          font-size: 14px;
          font-weight: 600;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          bottom: 20px;
        }
      }

      .right {
        width: 50%;
        padding: 10px;
        box-sizing: border-box;
        background: #444b55;
        border-radius: 10px;
        margin-left: 10px;

        .right-title {
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          padding-bottom: 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #797c84;
        }

        .right-text {
          margin-top: 10px;
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
        }

        .right-time {
          margin-top: 10px;
          color: #fff;
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 20px;
        }

        .right-list {
          border-radius: 30px;
          height: 40px;
          background: #fff;
          display: inline-flex;
          align-items: center;
          margin-bottom: 10px;
          justify-content: center;
          font-size: 14px;
          color: #276cd3;
          font-weight: 600;
          border: 1px solid #fff;
          padding: 0 10px;
          box-sizing: border-box;
          width: 100%;
        }

        .right-list:last-child {
          color: #fff;
          background: none;
        }
      }
    }

    .profile {
      margin-top: 20px;
      padding: 30px 10px;
      box-sizing: border-box;

      .profile-title {
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 20px;
      }

      .profile-img {
        width: 100%;
        height: 230px;
        object-fit: cover;
      }

      .profile-text {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 500;
      }

      .profile-block {
        display: flex;
        justify-content: center;
        margin-top: 20px;

        .list {
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          margin-right: 20px;
          border-radius: 10px;
          background: #ffffff;
          box-shadow: 0 4px 24px rgba(89, 95, 102, 0.25);
          transition: transform 0.2s, 0.2s;
          position: relative;

          .list-title {
            font-size: 16px;
            font-weight: 500;
            width: 60px;
            text-align: center;
          }

          .list-striping {
            max-width: 150px;
            width: 60px;
            height: 3px;
            background: #276cd3;
            position: absolute;
            margin-top: 40px;
            transition: width 1s, 0.5s;
            border-radius: 4px;
          }
        }

        .list:last-child {
          margin-right: 0;
        }
      }

      // .left {
      //   width: 40%;
      //   // height: 230px;
      //   margin-right: 10px;

      //   img {
      //     width: 100%;
      //     height: 100%;
      //     object-fit: cover;
      //   }
      // }

      // .right {
      //   width: 60%;

      //   .right-title {
      //     font-size: 16px;
      //     font-weight: 500;
      //     margin-bottom: 20px;
      //   }

      //   .right-text {
      //     font-size: 12px;
      //     font-weight: 500;
      //   }

      //   .right-block {
      //     display: flex;
      //     .list {
      //       padding: 10px;
      //       box-sizing: border-box;
      //       background: #fff;
      //       border-radius: 5px;
      //     }
      //   }
      // }
    }
  }
}
</style>